<template>
  <div class="recommend-page">
    <NavigationBar />
    
    <!-- Breadcrumb -->
    <div class="breadcrumb">
      <div class="breadcrumb-content">
        <router-link to="/">首页</router-link>
        <span class="breadcrumb-separator">/</span>
        <span class="breadcrumb-current">智能推荐</span>
      </div>
    </div>

    <div class="recommend-container">
      <div class="recommend-header">
        <p>根据您的喜好和季节为您推荐合适的衣物</p>
      </div>

      <div class="recommend-grid">
        <template v-if="recommendItems && recommendItems.length > 0">
          <div v-for="item in paginatedItems" :key="item.id" class="recommend-card">
            <div class="card-image">
              <img :src="item.imageUrl" :alt="item.name">
            </div>
            <div class="card-content">
              <h3>{{ item.name }}</h3>
              <p class="price">¥{{ item.price }}</p>
              <p class="description">{{ item.description }}</p>
              <div class="card-actions">
                <a-button type="link" :href="item.productUrl" target="_blank">查看详情</a-button>
              </div>
            </div>
          </div>
        </template>
        <div v-else class="empty-state">
          <info-circle-outlined style="font-size: 48px; color: #94a3b8;" />
          <p>暂无推荐</p>
        </div>
      </div>

      <div class="pagination">
        <a-pagination
          v-model:current="currentPage"
          :total="totalItems"
          :page-size="pageSize"
          show-size-changer
          :page-size-options="['12', '24', '36', '48']"
          @change="handlePageChange"
          @showSizeChange="handlePageSizeChange"
        />
      </div>
    </div>
    <PageFooter />
  </div>
</template>

<script>
import { defineComponent, ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import NavigationBar from '@/components/layout/NavigationBar.vue'
import PageFooter from '@/components/layout/PageFooter.vue'
import { InfoCircleOutlined } from '@ant-design/icons-vue'
import axios from 'axios'

export default defineComponent({
  name: 'RecommendPage',
  components: {
    NavigationBar,
    PageFooter,
    InfoCircleOutlined
  },
  setup() {
    // 状态管理
    const recommendItems = ref([])
    const currentPage = ref(1)
    const pageSize = ref(12)
    const loading = ref(false)

    // 计算属性
    const paginatedItems = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value
      const end = start + pageSize.value
      return recommendItems.value.slice(start, end)
    })

    const totalItems = computed(() => recommendItems.value.length)

    // 方法
    const handlePageChange = (page) => {
      currentPage.value = page
    }

    const handlePageSizeChange = (current, size) => {
      pageSize.value = size
      currentPage.value = 1
    }

    const fetchRecommendations = async () => {
      try {
        loading.value = true
        const token = localStorage.getItem('token')
        
        if (!token) {
          message.error('请先登录')
          return
        }

        const response = await axios.get('/api/clothes-one', {
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          }
        })

        if (response.data.success) {
          recommendItems.value = response.data.data
        } else {
          message.error(response.data.errorMsg || '获取推荐失败')
        }
      } catch (error) {
        console.error('获取推荐失败:', error)
        if (error.response) {
          if (error.response.status === 401) {
            message.error('登录已过期，请重新登录')
          } else {
            message.error(error.response.data.errorMsg || '获取推荐失败')
          }
        } else {
          message.error('网络错误，请检查网络连接')
        }
      } finally {
        loading.value = false
      }
    }

    // 生命周期钩子
    onMounted(() => {
      fetchRecommendations()
    })

    return {
      recommendItems,
      currentPage,
      pageSize,
      paginatedItems,
      totalItems,
      handlePageChange,
      handlePageSizeChange
    }
  }
})
</script>

<style scoped>
.recommend-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.breadcrumb {
  background-color: #f8fafc;
  padding: 1rem 0;
  margin-bottom: 2rem;
}

.breadcrumb-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.breadcrumb a {
  color: #0ea5e9;
  text-decoration: none;
}

.breadcrumb-separator {
  margin: 0 0.5rem;
  color: #94a3b8;
}

.recommend-container {
  flex: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.recommend-header {
  text-align: center;
  margin-bottom: 2rem;
}

.recommend-header h1 {
  font-size: 2rem;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.recommend-header p {
  color: #64748b;
}

.recommend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}

.recommend-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.recommend-card:hover {
  transform: translateY(-4px);
}

.card-image {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-content {
  padding: 1.5rem;
}

.card-content h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  color: #1e293b;
}

.price {
  color: #ef4444;
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.description {
  color: #64748b;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 0;
  color: #64748b;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

@media (max-width: 1200px) {
  .recommend-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .recommend-grid {
    grid-template-columns: 1fr;
  }
  
  .card-image {
    height: 250px;
  }
}
</style>